<template>
	<div>
		<el-submenu v-if="item.meta.subMenu" :index="item.name">
			<template slot="title">
				<i :class="item.meta.icon"></i>
				<span>{{item.name}}</span>
			</template>
			<template v-if="item.children">
				<subMenu v-for="child in item.children" :item="child" :key="child.name"
					:parentPath="getCurrentPath(item)">
				</subMenu>
			</template>
		</el-submenu>

		<el-menu-item v-else :index="getCurrentPath(item)">
			<template slot="title">
				<i :class="item.meta.icon"></i>
				<span>{{item.name}}</span>
			</template>
		</el-menu-item>
	</div>
</template>

<script>
	export default {
		name: 'subMenu',
		props: {
			item: {
				path: '',
				name: '',
				meta: {
					subMenu: true
				},
				children: []
			},
			parentPath: ''
		},

		data() {
			return {
				currentPath: ''
			}
		},
		methods: {
			getCurrentPath(item) {
				this.currentPath = this.parentPath + '/' + item.path;
				let result = this.currentPath.replace('//', '/');
				return result;
			}
		}
	}
</script>

<style>
</style>
